<template>
  <div>
    <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px">
      <el-form-item label="教师编号" prop="number" style="width: 200px">
        <el-input type="text" v-model="ruleForm.number"> </el-input>
      </el-form-item>
      <el-form-item
        label="教师姓名"
        prop="name"
        style="width: 200px; margin-top: -6%; margin-left: 17%"
      >
        <el-input type="text" v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item
        label="教授科目"
        prop="subject"
        style="width: 200px; margin-top: -6%; margin-left: 34%"
      >
        <!-- 科目选择-->
        <el-select v-model="ruleForm.subject" placeholder="请选择">
          <el-option
            v-for="item in ruleForm.options"
            :key="item.subject"
            :label="item.label"
            :value="item.subject"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 职位选择-->
      <el-form-item
        label="职位"
        prop="position"
        style="width: 200px; margin-top: -6%; margin-left: 49%"
      >
        <el-select v-model="ruleForm.position" placeholder="请选择">
          <el-option
            v-for="item in ruleForm.optionss"
            :key="item.position"
            :label="item.label"
            :value="item.position"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="联系电话"
        prop="tel"
        style="width: 300px; margin-top: -6%; margin-left: 66%"
      >
        <el-input type="text" v-model="ruleForm.tel"></el-input>
      </el-form-item>
      <el-form-item label="教师账号" prop="account" style="width: 300px">
        <el-input type="text" v-model="ruleForm.account"></el-input>
      </el-form-item>
      <el-form-item
        label="初始密码"
        prop="password"
        style="width: 300px; margin-top: -6%; margin-left: 35%"
      >
        <el-input type="password" v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item style="margin-top: -6%; margin-left: 70%">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="教师编号" width="120" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.number }}</span>
        </template>
      </el-table-column>

      <el-table-column label="教师账号" width="150" align="center">
        <template slot-scope="scope">
          <div
            slot="reference"
            class="name-wrapper"
            v-if="scope.row.account == null"
          >
            <el-tag size="medium"> 暂无分配 </el-tag>
          </div>
          <div slot="reference" class="name-wrapper" v-else>
            <el-tag size="medium">
              {{ scope.row.account }}
            </el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="教师密码" width="150" align="center">
        <template slot-scope="scope">
          <div
            slot="reference"
            class="name-wrapper"
            v-if="scope.row.password == null"
          >
            <el-tag size="medium"> 暂无分配 </el-tag>
          </div>
          <div slot="reference" class="name-wrapper" v-else>
            <el-tag size="medium">
              {{ scope.row.password }}
            </el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="教师姓名" width="120" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="教授科目" width="120" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.subject }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="职位" width="120" align="center">
        <template slot-scope="scope">
          <div
            slot="reference"
            class="name-wrapper"
            v-if="scope.row.position == 1"
          >
            <el-tag size="medium"> 授课教师 </el-tag>
          </div>
          <div
            slot="reference"
            class="name-wrapper"
            v-if="scope.row.position == 2"
          >
            <el-tag size="medium"> 班主任 </el-tag>
          </div>
          <div
            slot="reference"
            class="name-wrapper"
            v-if="scope.row.position == 3"
          >
            <el-tag size="medium"> 年级主任 </el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="pswBox(scope.row)">
            修改密码
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 点击修改密码的弹出框 -->
    <el-dialog title="修改密码" :visible.sync="dialogVisible"  width="30%" style="text-align: center;">
      <h3>请输入密码:</h3><input type="password" v-model="input1">
      <h3>请输入新密码:</h3><input type="password" v-model="newPassword">
      <span slot="footer" class="dialog-footer" style="margin-right:5%">
        <el-button type="primary" @click="changePsw(input1,password,u_id),dialogVisible=false"
          >确 定</el-button
        >
        <el-button @click="dialogVisible=false">取消</el-button>
      </span>
    </el-dialog>

    <!-- 分页组件 -->
    <el-pagination
      @next-click="next"
      @prev-click="prev"
      :current-page="currentPage"
      :page-sizes="[8]"
      :page-size="size"
      layout="total, sizes, prev, pager, next"
      :total="total"
      align="center"
    >
    </el-pagination>
  </div>
</template>
<script>
import axios from "axios";
import commons from "../../assets/commons";
export default {
  data() {
    return {
      currentPage: 1, //当前页
      total: 0, //总条数
      totalPage: 0, //总页数
      size: 8, //每页大小
      tableData: [],

      dialogVisible: false,
      input1:"",
      input2:"",

      newPassword:"",

      ruleForm: {
        number: "",
        name: "",
        options: [
          {
            subject: "语文",
            label: "语文",
          },
          {
            subject: "数学",
            label: "数学",
          },
          {
            subject: "英语",
            label: "英语",
          },
          {
            subject: "政治",
            label: "政治",
          },
          {
            subject: "历史",
            label: "历史",
          },
          {
            subject: "地理",
            label: "地理",
          },
          {
            subject: "物理",
            label: "物理",
          },
          {
            subject: "化学",
            label: "化学",
          },
          {
            subject: "生物",
            label: "生物",
          },
        ],
        subject: "",

        optionss: [
          {
            position: "1",
            label: "授课教师",
          },
          {
            position: "2",
            label: "班主任",
          },
        ],
        position: "",
        tel: "",
        account: "",
        password: "",
      },
    };
  },
  methods: {
    //添加账号信息
    submitForm(ruleForm) {

       if (this.number == null&&this.name==null&&this.subjec==null&&this.position==null&&this.account==null&&this.password==null) {
         
           this.$message("请完善账号详情")

       }else{
         this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          let formDatas = {
            number: this.ruleForm.number,
            name: this.ruleForm.name,
            subject: this.ruleForm.subject,
            tel: this.ruleForm.tel,
            position: this.ruleForm.position,
            account: this.ruleForm.account,
            password: this.ruleForm.password,
          };
          console.info(formDatas);
          axios
            .post(commons.baseUrl + "gradedean/addAccountInfo", formDatas, 
            {headers: { "Content-Type": "application/JSON" }}
            )
            .then((resp) => {
                console.log(resp);
                 this.$message(resp.data.message);
                 this.$router.go(0)
  
            });
        } else {
          console.log("添加失败!!");
          return false;
        }
      });
       }

    },
    resetForm(ruleForm) {
      this.$refs[ruleForm].resetFields();
    },
    pswBox(row){
console.log(row)
      this.dialogVisible = true;
      this.password = row.password
      this.u_id = row.u_id

    },
    changePsw(row){

      this.dialogVisible = true;

      console.info(row)

      if (this.input1 == this.password) {
        
         axios
         .get(
           
           commons.baseUrl+"gradedean/changePsw?newPassword="+this.newPassword
           +"&u_id="+this.u_id
           
         ).then(resp=>{

            console.log(resp)
            this.$message(resp.data.message)

         })
      } else{

         alert("密码错误");

      }

    },

    //分页
    findByPage() {
      axios
        .get(
          commons.baseUrl +
            "gradedean/tuInfo?page=" +
            this.currentPage +
            "&size=" +
            this.size
        )
        .then((res) => {
          this.tableData = res.data.datas;
          console.log(res);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;
        });
    },

    //下一页
    next() {
      this.currentPage = this.currentPage + 1;
      axios
        .get(
          commons.baseUrl +
            "gradedean/tuInfo?page=" +
            this.currentPage +
            "&size=" +
            this.size
        )
        .then((res) => {
          this.tableData = res.data.datas;
          console.log(res);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;
        });
    },

    //上一页
    prev() {
      this.currentPage = this.currentPage - 1;
      axios
        .get(
          commons.baseUrl +
            "gradedean/tuInfo?page=" +
            this.currentPage +
            "&size=" +
            this.size
        )
        .then((res) => {
          this.tableData = res.data.datas;
          console.log(res);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;
        });
    },
  },
  mounted() {
    //axios  get请求
    //调用方法获取第一页数据
    this.findByPage();
  },
  computed: {},
};
</script>
<style scoped></style>
